<template>
	<mescroll-uni @init="mescrollInit" :up="upOption" :down="downOption" @down="downCallback" @up="upCallback"
		:bottom="100">
		<view class="container">
			<!-- 轮播图 -->
			<swiper class="swiper" circular :autoplay="true" :interval="3000" :duration="500">
				<swiper-item v-for="(swiper,index) in detail.tupian.split(',')" :key="index">
					<image mode="aspectFill" :src="_imgUrl + swiper" class="swiper-image"></image>
				</swiper-item>
			</swiper>

			<!-- 商品信息 -->
			<view class="card info-card">
				<view class="header">
						<text class="title">{{detail.shangpinmingcheng}}</text>
					<!-- <view class="cuIcon-favorfill favor-icon" @click="shoucang"></view> -->
				</view>

				<!-- <view class="info-item">
					<text class="label">规格</text>
					<text class="value">{{detail.guige}}</text>
				</view> -->
				<view class="price-section">
					<text class="symbol">¥</text>
					<text class="price">{{detail.jiage}}</text>
					<text class="stock">库存 {{detail.shuliang}} 件</text>
				</view>
			</view>

			<!-- 农户信息 -->
			<!-- <view class="card seller-card">
				<view class="info-item">
					<text class="label">农户账号</text>
					<text class="value">{{detail.nonghuzhanghao}}</text>
				</view>
				<view class="info-item">
					<text class="label">农户姓名</text>
					<text class="value">{{detail.nonghuxingming}}</text>
				</view>
				<view class="info-item">
					<text class="label">地址</text>
					<text class="value">{{detail.dizhi}}</text>
				</view>
			</view> -->

			<!-- 商品详情 -->
			<view class="card detail-card">
				<text class="section-title">商品详情</text>
				<rich-text :nodes="detail.guige" class="rich-text"></rich-text>
			</view>

			<!-- 评论 -->
			<view class="card comment-card">
				<view class="comment-header">
					<text class="section-title">用户评价</text>
					<view class="comment-btn" @click="onCommentTap">
						<text>发表评论</text>
						<view class="cuIcon-write"></view>
					</view>
				</view>

				<view v-for="(item,index) in commentList" :key="index" class="comment-item">
					<view class="user-info">
						<text class="username">{{item.userName}}</text>
						<text class="time">{{item.createTime}}</text>
					</view>
					<text class="comment-content">{{item.plContent}}</text>
					<view v-if="item.reply" class="reply-section">
						<text class="reply-label">商家回复：</text>
						<text class="reply-content">{{item.reply}}</text>
					</view>
				</view>
			</view>

			<!-- 底部操作栏 -->
			<view class="bottom-bar" v-if="roles == 'yonghu'">
				<button class="buy-btn" @tap="onAcrossTap('dingdanxinxi')">加入购物车</button>
			</view>
		</view>
		<!-- 确认完成弹窗 -->
		<uni-popup class="popup-content" ref="popup" type="center">
			<form class="popup-form">
				<view class="cu-form-group margin-top">
					<picker @change="sfshChange" :value="sfshIndex" :range="sfshOptions">
						<view class="uni-input">{{detail.sfsh?detail.sfsh:'选择审核结果'}}</view>
					</picker>
				</view>
				<view class="cu-form-group">
					<!-- <view class="title">审核回复</view> -->
					<textarea style="width: 200px;" v-model="detail.shhf" placeholder="审核回复"></textarea>
					<!-- <input v-model="douyinId" placeholder="审核回复" name="input"></input> -->
				</view>
				<view class="btn-content">
					<button @tap="onCloseWinTap" class="cu-btn bg-cyan">取消</button>
					<button @tap="onFinishTap" class="cu-btn bg-red">确认</button>
				</view>
			</form>
		</uni-popup>

	</mescroll-uni>
</template>

<script>
	export default {
		data() {
			return {
				autoplaySwiper: {
					"delay": 5000,
					"disableOnInteraction": false
				} ? true : false,
				intervalSwiper: {
					"delay": 5000,
					"disableOnInteraction": false
				} ? 5000 : 5000,
				btnColor: ['#409eff', '#67c23a', '#909399', '#e6a23c', '#f56c6c', '#356c6c', '#351c6c', '#f093a9',
					'#a7c23a', '#104eff', '#10441f', '#a21233', '#503319'
				],
				id: '',
				detail: {},
				swiperList: [],
				commentList: [],
				mescroll: null, //mescroll实例对象
				downOption: {
					auto: false //是否在初始化后,自动执行下拉回调callback; 默认true
				},
				upOption: {
					noMoreSize: 3, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					textNoMore: '~ 没有更多了 ~',
				},
				hasNext: false,
				user: {},
				sfshIndex: -1,
				sfshOptions: ['通过', '不通过'],
				count: 0,
				_imgUrl: '',
				roles: ''
			}
		},
		computed: {
			SecondToDate: function() {
				var time = this.count;
				if (null != time && "" != time) {
					if (time > 60 && time < 60 * 60) {
						time =
							parseInt(time / 60.0) +
							"分钟" +
							parseInt((parseFloat(time / 60.0) - parseInt(time / 60.0)) * 60) +
							"秒";
					} else if (time >= 60 * 60 && time < 60 * 60 * 24) {
						time =
							parseInt(time / 3600.0) +
							"小时" +
							parseInt(
								(parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60
							) +
							"分钟" +
							parseInt(
								(parseFloat(
										(parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60
									) -
									parseInt(
										(parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60
									)) *
								60
							) +
							"秒";
					} else if (time >= 60 * 60 * 24) {
						time =
							parseInt(time / 3600.0 / 24) +
							"天" +
							parseInt(
								(parseFloat(time / 3600.0 / 24) - parseInt(time / 3600.0 / 24)) *
								24
							) +
							"小时" +
							parseInt(
								(parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60
							) +
							"分钟" +
							parseInt(
								(parseFloat(
										(parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60
									) -
									parseInt(
										(parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60
									)) *
								60
							) +
							"秒";
					} else {
						time = parseInt(time) + "秒";
					}
				}
				return time;
			}
		},
		async onLoad(options) {

			this.id = options.id;
		},
		async onShow(options) {
			this.roles = uni.getStorageSync('roles')
			this._imgUrl = this.$base.url
			// 渲染数据
			this.init();
			let table = uni.getStorageSync("nowTable");
			// 获取用户信息
			// let res = await this.$api.session(table);
			this.user = uni.getStorageSync('userInfo');
			// this.btnColor = this.btnColor.sort(() => {
			// 	return (0.5 - Math.random());
			// });
			this.upCallback(this.mescroll);
		},
		destroyed: function() {
			window.clearInterval(this.inter);
		},
		methods: {
			// 支付
			onPayTap() {
				uni.setStorageSync('paytable', 'shangpinxinxi');
				uni.setStorageSync('payObject', this.detail);
				this.$utils.jump('../pay-confirm/pay-confirm?type=1')
			},
			// 收藏
			async shoucang() {
				let _this = this;
				uni.showModal({
					title: '提示',
					content: '是否收藏',
					success: async function(res) {
						if (res.confirm) {
							await _this.$api.add('storeup', {
								userid: _this.user.id,
								name: _this.detail.shangpinmingcheng,
								picture: _this.swiperList[0],
								refid: _this.detail.id,
								tablename: 'shangpinxinxi'
							});
							_this.$utils.msg('收藏成功');
						}
					}
				});
			},
			// 跨表
			onAcrossTap(tableName) {
				uni.setStorageSync('crossTable', 'shangpinxinxi');
				uni.setStorageSync(`crossObj`, this.detail);
				this.$utils.jump(`../${tableName}/add-or-update?cross=true`);
			},
			// 获取详情
			async init() {
				let res = await this.$api.info('shangpinxinxi', this.id);
				this.detail = res.data;
				// 轮播图片
				this.swiperList = this.detail.tupian ? this.detail.tupian?.split(",") : [];
				//修改富文本的图片样式
				this.detail.shangpinxiangqing = this.detail.shangpinxiangqing.replace(/img src/gi,
					"img style=\"width:100%;\" src");
			},

			// mescroll组件初始化的回调,可获取到mescroll对象
			mescrollInit(mescroll) {
				this.mescroll = false;
			},

			/*下拉刷新的回调 */
			downCallback(mescroll) {
				this.hasNext = false
				mescroll.resetUpScroll()
			},

			/*上拉加载的回调: mescroll携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10 */
			async upCallback(mescroll) {
				let res = await this.$api.list('comment', {
					pageNum: mescroll.num,
					pageSize: mescroll.size,
					tzId: this.id
				});
				// 如果是第一页数据置空
				if (mescroll.num == 1) this.commentList = [];
				this.commentList = this.commentList.concat(res.rows);
				console.log('res.rows', res.rows.length);
				if (res.rows.length == 0) this.hasNext = false;
				mescroll.endSuccess(mescroll.size, this.hasNext);

			},

			onChatTap() {
				this.$utils.jump('../chat/chat')
			},
			// 下载
			download(url) {
				let _this = this;
				uni.downloadFile({
					url: url,
					success: (res) => {
						if (res.statusCode === 200) {
							_this.$utils.msg('下载成功');
							window.open(url);
						}
					}
				});
			},
			// 
			onCartTabTap() {
				this.$utils.tab('../shop-cart/shop-cart')
			},
			// 添加评论
			onCommentTap() {
				this.$utils.jump(
					`../discussshangpinxinxi/add-or-update?refid=${this.id}&tzId=${this.detail.id}&plType=${'商品'}`)
			},
			// 点赞
			async zan() {
				let _this = this;
				uni.showModal({
					title: '提示',
					content: '是否点赞',
					success: async function(res) {
						if (res.confirm) {
							_this.detail.thumbsupnum = parseInt(_this.detail.thumbsupnum) + 1;
							await _this.$api.update('shangpinxinxi', _this.detail);
							_this.$utils.msg('点赞成功');
						}
					}
				});
			},
			// 踩
			async cai() {
				let _this = this;
				uni.showModal({
					title: '提示',
					content: '是否点踩',
					success: async function(res) {
						if (res.confirm) {
							_this.detail.crazilynum = parseInt(_this.detail.crazilynum) + 1;
							await _this.$api.update('shangpinxinxi', _this.detail);
							_this.$utils.msg('点踩成功');
						}
					}
				});
			},
			onSHTap() {
				this.$refs.popup.open()
			},
			// 完成审核
			async onFinishTap() {
				if (!this.detail.sfsh) {
					this.$utils.msg('请选择审核状态');
					return
				}
				if (!this.detail.shhf) {
					this.$utils.msg('请填写审核回复');
					return
				}
				if (this.detail.sfsh == "通过") {
					this.detail.sfsh = '是'
				}
				if (this.detail.sfsh == "不通过") {
					this.detail.sfsh = '否'
				}
				await this.$api.update('shangpinxinxi', this.detail);
				this.$utils.msg('审核成功');
				this.$refs.popup.close();
			},
			// 关闭窗口
			onCloseWinTap() {
				this.$refs.popup.close()
			},
			sfshChange(e) {
				console.log(this.detail)
				this.sfshIndex = e.target.value
				this.detail.sfsh = this.sfshOptions[this.sfshIndex]
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(15deg, #f8f9ff 0%, #f1f3fe 100%);
	}

	.swiper {
		height: 600rpx;
		border-radius: 24rpx;
		margin: 32rpx;
		overflow: hidden;
		box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.2);

		&-image {
			width: 100%;
			height: 100%;
		}
	}

	.card {
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(20rpx);
		border-radius: 24rpx;
		margin: 32rpx;
		padding: 32rpx;
		box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.1);

		&.info-card {
			margin-top: -80rpx;
			position: relative;
			z-index: 2;
		}
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 32rpx;

		.title {
			font-size: 36rpx;
			font-weight: 600;
			color: #2d3748;
			max-width: 80%;
		}

		.favor-icon {
			font-size: 48rpx;
			color: #ff4757;
			padding: 16rpx;
		}
	}

	.info-item {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;

		.label {
			font-size: 28rpx;
			color: #667eea;
			width: 140rpx;
			flex-shrink: 0;
		}

		.value {
			font-size: 28rpx;
			color: #4a5568;
			flex: 1;
		}
	}

	.price-section {
		display: flex;
		align-items: baseline;
		margin-top: 32rpx;

		.symbol {
			font-size: 28rpx;
			color: #ff4757;
			margin-right: 8rpx;
		}

		.price {
			font-size: 44rpx;
			font-weight: 700;
			color: #ff4757;
			margin-right: 24rpx;
		}

		.stock {
			font-size: 24rpx;
			color: #718096;
		}
	}

	.section-title {
		display: block;
		font-size: 32rpx;
		font-weight: 600;
		color: #2d3748;
		padding-bottom: 24rpx;
		border-bottom: 1rpx solid #e2e8f0;
		margin-bottom: 32rpx;
	}

	.rich-text {
		font-size: 28rpx;
		line-height: 1.8;
		color: #4a5568;

		img {
			border-radius: 16rpx;
			margin: 24rpx 0;
		}
	}

	.comment {
		&-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 32rpx;
		}

		&-btn {
			display: flex;
			align-items: center;
			padding: 12rpx 24rpx;
			background: linear-gradient(135deg, #667eea, #764ba2);
			border-radius: 40rpx;
			color: white;
			font-size: 26rpx;

			.cuIcon-write {
				margin-left: 12rpx;
			}
		}

		&-item {
			padding: 24rpx 0;
			border-bottom: 1rpx solid #f1f3fe;

			&:last-child {
				border-bottom: none;
			}
		}

		&-content {
			font-size: 28rpx;
			color: #4a5568;
			line-height: 1.6;
			margin-top: 16rpx;
		}
	}

	.user-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 12rpx;

		.username {
			font-size: 28rpx;
			color: #667eea;
		}

		.time {
			font-size: 24rpx;
			color: #a0aec0;
		}
	}

	.reply-section {
		background: #f8f9ff;
		border-radius: 12rpx;
		padding: 16rpx;
		margin-top: 16rpx;

		&-label {
			color: #764ba2;
			font-size: 24rpx;
		}

		&-content {
			color: #718096;
			font-size: 26rpx;
		}
	}

	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background: rgba(255, 255, 255, 0.96);
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 0 32rpx;
		box-shadow: 0 -4rpx 16rpx rgba(102, 126, 234, 0.1);

		.buy-btn {
			background: linear-gradient(135deg, #667eea, #764ba2);
			color: white;
			height: 80rpx;
			border-radius: 40rpx;
			font-size: 32rpx;
			padding: 0 64rpx;
			box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
			transition: all 0.2s;

			&:active {
				transform: scale(0.98);
				opacity: 0.9;
			}
		}
	}
</style>